<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单列表</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
	<div class="layui-form" style="margin-top: 20px" onsubmit="false">
		<div class="layui-form-item">
			<label class="layui-form-label">订单编号:</label>
			<div class="layui-input-inline" style="width: 130px">
				<input type="text" name="of_id" id="of_id" class="layui-input"
					lay-verify="required" placeholder="请输入订单编号">
			</div>
			<label class="layui-form-label">下单人:</label>
			<div class="layui-input-inline" style="width: 130px">
				<input type="text" name="u_name" id="u_name" class="layui-input"
					lay-verify="required" placeholder="请输入用户名称">
			</div>
			<label class="layui-form-label">订单状态</label>
						<div class="layui-input-inline" style="width: 120;">
							<select name="of_state" id="of_state" class="layui-input">
								<option value=''>请选择状态</option>
								<option value="下单未付款">下单未付款</option>
								<option value="付款未发货">付款未发货</option>
								<option value="付款己发货">付款己发货</option>
								<option value="收货未评价">收货未评价</option>
								<option value="收货已评价">收货已评价</option>
							</select>
						</div>
			<button class="layui-btn" id="serach" data-type="reload">查询</button>
		</div>
	</div>

	<table class="layui-hide" id="demo" lay-filter="demo"></table>
		<!-- 按钮 -->
	<script type="text/html" id="switchTpl">
		<input type="checkbox" name="of_sendout" lay-skin="switch" value="{{d.of_id}}" lay-text="是|否" lay-filter="p_stateDemo" {{ d.of_sendout == '0'  ? 'checked' : '' }}>
	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="detail">订单详情</a>
  		<a class="layui-btn layui-btn-xs" lay-event="state">订单状态</a>
	</script>
	<script>
	layui.use([ 'form','layer','jquery','table'], function() {
		var layer = layui.layer, $ = layui.jquery, form = layui.form,table=layui.table;
							var $ = layui.jquery;//引入jquery
			//执行渲染
			table.render({
				elem : '#demo' //指定原始表格元素选择器（推荐id选择器）
				,
				url : '/wk1un2_electricity_digital/Backstage/getAllOrderForm'
				,where : {
					
					of_id:'',
					u_name:'',
					of_state : ''
					
				},
				method : 'POST',
				cols : [ [ {
					type : "checkbox",
					fixed:'left',
					width : 50
				},{
					field : 'of_id',
					title : '订单编号',
					fixed:'left',
					align : 'center',
					width : 100
				}, {
					field : 'u_name',
					width : 100,
					title : '下单人',
					align : "center"
				}, {
					field : 'ur_consigneename',
					width : 100,
					title : '收货人',
					align : "center"
				}, {
					field : 'od_num',
					title : '订单数量',
					align : 'center',
					width : 100
				}, {
					field : 'od_totalprice',
					width : 100,
					title : '订单总额',
					align : "center"
				}, {
					field : 'of_payment',
					width : 150,
					title : '支付方式',
					align : "center"
				}, {
					field : 'of_ordertime',
					title : '下单时间',
					align : 'center',
					width : 180
				}, {
					field : 'of_state',
					title : '订单状态',
					align : 'center',
					width : 120
				}, {
					field : 'of_sendout',
					title : '是否发货',
					toolbar : '#switchTpl',
					align : 'center',
					width : 120
				}, {
					field : 'right',
					title : '操作',
					toolbar : '#barDemo',
					align : 'center',
					fixed:'right',
					width : 250
				} ] ],
				page : true,
				id : 'testReload'
			});
			form.on('switch(p_stateDemo)', function(data) {
	              var of_sendout = this.checked ? 0 : 1;
	              var of_id = this.value;
	              $.ajax({
	            	  url :'/wk1un2_electricity_digital/Backstage/updateorderformsendout',
	                type : "get",
	                data : {
	                	of_sendout : of_sendout,
	                	of_id : of_id
	                },
	                success : function(d) {
	                  if (d.code == 0) {
	                    layer.msg("操作成功！");
	                  }else if (d.code == 1) {
	                    layer.msg("操作成功！");
	                  }else {
	                    layer.msg("操作失败！", {
	                      icon : 5
	                    });
	                  }
	                }
	              })
	            });
			//监听工具条
			table.on('tool(demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				if (obj.event === 'detail') { //查看
					layer.open({//打开一个页面
						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						area : [ '800px', '500px' ],//页面宽高
						content : 'OrderForm_details.jsp',//页面所在位置
						title : '您正在查看下单人为' + obj.data.u_name + '的订单信息：',
						success : function(layero, index) {
							var body = layer.getChildFrame('body',index);
							body.contents().find("#of_id").val(obj.data.of_id);
							body.contents().find("#p_id").val(obj.data.p_id);
							body.contents().find("#p_name").val(obj.data.p_name);
							body.contents().find("#p_type").val(obj.data.p_type);
							body.contents().find("#p_memcapa").val(obj.data.p_memcapa);
							body.contents().find("#p_stocapa").val(obj.data.p_stocapa);
							body.contents().find("#p_size").val(obj.data.p_size);
							body.contents().find("#p_pixel").val(obj.data.p_pixel);
							body.contents().find("#p_cpumodel").val(obj.data.p_cpumodel);
							body.contents().find("#od_num").val(obj.data.od_num);
							body.contents().find("#od_price").val(obj.data.od_price);
							body.contents().find("#od_totalprice").val(obj.data.od_totalprice);
							body.contents().find("#of_payment").val(obj.data.of_payment);
							body.contents().find("#of_state").val(obj.data.of_state);
							body.contents().find("#u_name").val(obj.data.u_name);
							body.contents().find("#ur_consigneename").val(obj.data.ur_consigneename);
							body.contents().find("#ur_detailsaddr").val(obj.data.ur_detailsaddr);
							body.contents().find("#ur_phone").val(obj.data.ur_phone);
							body.contents().find("#of_ordertime").val(obj.data.of_ordertime);
							body.contents().find("#of_deliverytime").val(obj.data.of_deliverytime);
							body.contents().find("#of_freight").val(obj.data.of_freight);
							body.contents().find("#of_receivetime").val(obj.data.of_receivetime);
							body.contents().find("#of_finishtime").val(obj.data.of_finishtime);
							body.contents().find("#of_complbusine").val(obj.data.of_complbusine);
							body.contents().find("#of_refund").val(obj.data.of_refund);
							body.contents().find("#of_message").val(obj.data.of_message);
							body.contents().find("#of_transport").val(obj.data.of_transport);
							body.contents().find("#of_checklogis").val(obj.data.of_checklogis);
						},
						end : function() {
						
						}
					});
				} else if (obj.event === 'state') { //编辑
					layer.open({//打开一个页面
						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						area : [ '800px', '500px' ],//页面宽高
						content : 'OrderFrom_updatestate.jsp',//页面所在位置
						title : '您正在编辑订单编号为' + obj.data.of_id + '的订单状态信息：',
						success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.contents().find("#of_id").val(obj.data.of_id);
							body.contents().find("#of_state").val(obj.data.of_state);
						},
						end : function() {
							window.location.reload();//当窗口关闭后刷新页面
						}
					});
				} 
			});

			$('#serach').on('click', function() {
				var of_id = $("#of_id").val();//上面搜索框的id
				var u_name = $("#u_name").val();//上面搜索框的id
				var of_state = $("#of_state").val();//上面搜索框的id
				table.reload('testReload', {//testReload,上面渲染逼格的id
					where : {//接口需要请求的参数
						'of_id' : of_id,
						'u_name' : u_name,
						'of_state' : of_state,
					}
				});
			});

		});
	</script>
</body>
</html>